<template>
   <!-- 公司设置 -->
   <div class="dashboard-container">
      <div class="app-container">
         <el-card>
            <el-tabs>
               <!-- 左侧内容 -->
               <el-tab-pane label="角色管理">
                  <el-row style="height:60px">
                     <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="small"
                        @click="showDialog = true"
                     >
                        新增角色
                     </el-button>
                  </el-row>
                  <el-table border="" :data="list">
                     <!-- 设置type属性为index即可显示从 1 开始的索引号。 -->
                     <el-table-column
                        label="序号"
                        width="120"
                        type="index"
                        align="center"
                     ></el-table-column>
                     <el-table-column
                        label="名称"
                        width="240"
                        prop="name"
                        align="center"
                     ></el-table-column>
                     <el-table-column
                        label="描述"
                        prop="description"
                        align="center"
                     ></el-table-column>
                     <el-table-column label="操作" align="center">
                        <!-- 怎么知道点击的是这行的数据
                           作用域插槽，取到当前数据的行数据 -->
                        <!-- row 是当前行的数据 -->
                        <template slot-scope="{ row }">
                           <el-button
                              type="success"
                              @click="assignPerm(row.id)"
                           >
                              分配权限
                           </el-button>
                           <el-button
                              type="primary"
                              @click="editRole(row.id)"
                           >
                              编辑
                           </el-button>
                           <el-button
                              type="danger"
                              @click="deleteRole(row.id)"
                           >
                              删除
                           </el-button>
                        </template>
                     </el-table-column>
                  </el-table>
                  <!-- 分页组件 -->
                  <el-row
                     type="flex"
                     justify="center"
                     align="middle"
                     style="height:60px"
                  >
                     <!-- prev, pager, next 上一页，页码，下一页 -->
                     <!--current-change 页码 改变时会触发  -->
                     <el-pagination
                        layout="prev, pager, next"
                        :total="page.total"
                        :page-size="page.pagesize"
                        :current-page="page.page"
                        @current-change="changePage"
                     ></el-pagination>
                  </el-row>
               </el-tab-pane>
               <!-- 右侧内容 -->
               <el-tab-pane label="公司信息">
                  <!-- 提示消息 -->
                  <!-- :closable="false"  不可删除 -->
                  <el-alert
                     title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
                     :closable="false"
                     type="info"
                     :show-icon="true"
                  ></el-alert>
                  <!-- 表单 -->
                  <el-form label-width="120px" style="margin-top:50px">
                     <el-form-item label="企业名称">
                        <el-input
                           style="width:400px"
                           disabled
                           v-model="formData.name"
                        ></el-input>
                     </el-form-item>
                     <el-form-item label="公司地址">
                        <el-input
                           style="width:400px"
                           disabled
                           v-model="formData.companyAddress"
                        ></el-input>
                     </el-form-item>
                     <el-form-item label="电话">
                        <el-input
                           style="width:400px"
                           disabled
                           v-model="formData.companyPhone"
                        ></el-input>
                     </el-form-item>
                     <el-form-item label="邮箱">
                        <el-input
                           style="width:400px"
                           disabled
                           v-model="formData.mailbox"
                        ></el-input>
                     </el-form-item>
                     <el-form-item label="备注">
                        <el-input
                           style="width:400px"
                           disabled
                           type="textarea"
                           v-model="formData.remarks"
                        ></el-input>
                     </el-form-item>
                  </el-form>
               </el-tab-pane>
            </el-tabs>
         </el-card>
      </div>
      <!-- 弹层组件 -->
      <!-- close 事件在点击确定的时候会触发 -->
      <el-dialog title="编辑部门" :visible="showDialog" @close="btnCancel">
         <el-form
            label-width="120px"
            :model="roleForm"
            :rules="rules"
            ref="roleForm"
         >
            <el-form-item label="角色名称" prop="name">
               <el-input v-model="roleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
               <el-input v-model="roleForm.description"></el-input>
            </el-form-item>
         </el-form>
         <!-- 底部确定取消 -->
         <el-row type="flex" justify="center">
            <el-col :span="8">
               <el-button size="small" type="primary" @click="btnOK">
                  确定
               </el-button>
               <el-button size="small" @click="btnCancel">取消</el-button>
            </el-col>
         </el-row>
      </el-dialog>
      <!-- 分配权限的弹层 -->
      <el-dialog
         title="分配权限"
         :visible="showPerDialog"
         @close="btnPerCancel"
      >
         <!-- 权限是一颗树 -->
         <!-- show-checkbox	节点是否可被选择 -->
         <!-- check-strictly	在显示复选框的情况下，
         是否严格的遵循父子不互相关联的做法，默认为 false 
         如果为true表示父子勾选时不互相关联，如果为false就互相关联-->
         <!-- node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 
         id作为唯一标识-->
         <!-- default-checked-keys	默认勾选的节点的 key 的数组 
         放的是已经勾选的哪一项，把数据给视图，不是双向数据流-->
         <!-- getCheckedKeys 方法返回的就是node-key 所绑定的获得的数组
         返回的是当前选中的所有的节点的id的集合的数组，这个是 el-tree 的方法
         把视图同步给数据
         -->
         <el-tree
            :data="permData"
            :props="defaultProps"
            :default-expand-all="true"
            :show-checkbox="true"
            :check-strictly="true"
            node-key="id"
            :default-checked-keys="selectCheck"
            ref="permTree"
         ></el-tree>
         <!-- 确定取消 -->
         <el-row type="flex" justify="center" slot="footer">
            <el-col :span="6">
               <el-button size="small" type="primary" @click="btnPermOK">
                  确定
               </el-button>
               <el-button size="small" @click="btnPerCancel">
                  取消
               </el-button>
            </el-col>
         </el-row>
      </el-dialog>
   </div>
</template>

<script>
import {
   getRoleList,
   getCompanyInfo,
   deleteRole,
   getRoleDetail,
   updateRole,
   addRole,
   assignPerm
} from '../../api/setting'
// vuex 中 个人信息有公司的id
import { mapGetters } from 'vuex'
import { getPermissionList } from '../../api/primission'
import { tranListToTreeData } from '../../utils'
export default {
   data() {
      return {
         // 角色数据
         list: [],
         // 页码及相关数据  跟后端接口对应了
         page: {
            // 页码
            page: 1,
            // 每页条数
            pagesize: 10,
            // 总数
            total: 0
            // 公司信息
         },
         formData: {},
         // 控制弹层的显示
         showDialog: false,
         // 弹层的信息
         roleForm: {
            // 角色名称
            name: '',
            // 角色描述
            description: ''
         },
         rules: {
            name: [
               {
                  required: true,
                  message: '角色名称不能为空',
                  trigger: 'blur'
               }
            ]
         },
         // 分配权限的弹层
         showPerDialog: false,
         // 权限数据
         permData: [],
         // 定义显示字段的名称和子属性的字段名称
         defaultProps: {
            label: 'name'
         },
         // 用来记录当前分配权限的id
         roleId: null,
         // 用来记录当前权限点的标识，默认显示的
         selectCheck: []
      }
   },
   computed: {
      ...mapGetters(['companyId'])
   },
   created() {
      // 获取角色数据
      this.getRoleList()
      // 公司信息
      this.getCompanyInfo()
   },
   methods: {
      // 获取所有角色列表
      async getRoleList() {
         const { total, rows } = await getRoleList(this.page)
         this.page.total = total
         this.list = rows
      },
      // 最新页码
      changePage(newPage) {
         // newPage 是当前点击的页码
         // 将当前页码赋值给当前的最新页码
         this.page.page = newPage
         this.getRoleList()
      },
      // 公司信息
      async getCompanyInfo() {
         // 赋值给 formData
         this.formData = await getCompanyInfo(this.companyId)
      },
      // 删除角色
      async deleteRole(id) {
         try {
            // 提示信息
            await this.$confirm('确认删除改角色吗？')
            // 只有点击了确定才进入到下方
            await deleteRole(id)
            // 重新加载数据
            this.getRoleList()
            this.$message.success('删除角色成功')
         } catch (error) {
            console.log(error)
         }
      },
      // 编辑
      async editRole(id) {
         // 显示弹层
         this.showDialog = true
         // 实现数据的回写
         this.roleForm = await getRoleDetail(id)
      },
      // 编辑确定
      async btnOK() {
         try {
            //  validate  若不传入回调函数，则会返回一个 promise
            await this.$refs.roleForm.validate()
            // 只有校验通过彩绘执行 await 下方的内容
            // 如果有 id 就是编辑，没有 id 就是新增
            if (this.roleForm.id) {
               // 编辑
               await updateRole(this.roleForm)
            } else {
               // 新增
               await addRole(this.roleForm)
            }

            // 重新加载数据
            this.getRoleList()
            this.$message.success('操作成功')
            // 关闭弹层会触发 el-dialog 的 close 事件，close 又调用了取消的函数
            this.showDialog = false
         } catch (error) {
            console.log(error)
         }
      },
      // 编辑取消
      btnCancel() {
         this.roleForm = {
            name: '',
            description: ''
         }
         this.showDialog = false
         // 移除校验规则
         this.$refs.roleForm.resetFields()
      },
      // 点击分配权限
      // 获取权限点数据，在点击时调用获取权限点数据
      async assignPerm(id) {
         // 获取所有权限点
         // 转换list 到树形
         this.permData = tranListToTreeData(await getPermissionList(), '0')
         // 先把 id 记下来
         this.roleId = id
         // 获取这个 id 的权限点
         // 获取角色详情，角色详情中有该角色的权限点数据
         // 当前角色所拥有的权限点数据
         const { permIds } = await getRoleDetail(id)
         // 将当前角色所拥有的权限 id 赋值
         this.selectCheck = permIds
         this.showPerDialog = true
      },
      // 确定
      async btnPermOK() {
         // console.log(this.$refs.permTree.getCheckedKeys())
         await assignPerm({
            // 所有权限点数据的集合
            permIds: this.$refs.permTree.getCheckedKeys(),
            id: this.roleId
         })
         this.$message.success('分配权限成功')
         this.showPerDialog = false
      },
      // 取消
      btnPerCancel() {
         // 重置它的默认数据
         this.selectCheck = []
         this.showPerDialog = false
      }
   }
}
</script>

<style></style>
